// 权限控制 路由守卫
import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 拿到所有动态路由表
import { asyncRoutes } from './router/asyncRoutes'
// 登录白名单
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 路由跳转前开启进度条
  // 路由守卫这种钩子函数通常都是成对出现
  // 如果中途改变了路由前进的方向，就找不到对应的后置守卫了
  NProgress.start()
  const token = store.state.user.token
  // 判断是否有token
  if (token) {
    // 有token，跳转的页面是否是登录页
    // 1、是 跳转登录页时直接到首页
    // 2、用户登陆之后,需要获取用户信息接口，有token才需要获取用户信息
    // 3、用户前往任意地址都需要调用
    // 4、不是 跳转登录页时通过放行

    // 没有token，是否在登录白名单里面
    // 如果includes返回为true，证明跳转的页面存在于白名单中，放行跳转
    // 如果不存在白名单中，直接跳转到登录页
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      if (!store.state.user.userInfo.userId) {
        await store.dispatch('user/fetchUserInfo')

        // 路由过滤
        // 拿到动态路由表和后端返回的权限之后
        // 通过路由表中的name字段和后端返回的数组中的字段作比较
        // 如果对应上了说明这个路由应该留下
        // 得到新的过滤好的路由表
        console.log(store.state.user.userInfo.roles.menus)
        console.log(asyncRoutes)
        const roles = store.state.user.userInfo.roles.menus
        const filterRoutes = asyncRoutes.filter(item => {
          return roles.includes(item.children[0].name)
        })
        // 将filterRoutes追加到过滤好的路由表中，异步操作
        router.addRoutes(filterRoutes)
        // 将过滤好的路由表通过vuex转换拼接成响应式数据
        store.commit('menu/setMenuList', filterRoutes)
        console.log('过滤之后的结果', filterRoutes)
        // 动态新增路由是移不动，不会立刻生效，
        // 为了保证生效，需要让用户在添加动态路由后重新进一下
        next({
          ...to,
          replace: true
        })
        return
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 路由后置守卫
router.afterEach((to, from) => {
  // 路由跳转后关闭进度条
  NProgress.done()
})
